<template>
  <d2-container>
    <div class="ml-2 mt-2">
      <div class="flex-1">
        <el-table :data="userList" stripe>
          <el-table-column type="expand" width="33">
            <template slot-scope="props">
              <div class="flex-1 mx-3">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="昵称">
                    <span>{{ props.row.nickname }}</span>
                  </el-form-item>
                  <el-form-item label="识别码">
                    <span>{{ props.row.mark_id }}</span>
                  </el-form-item>
                  <el-form-item label="性别">
                    <span>{{ props.row.sex }}</span>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <span>{{ props.row.age }}</span>
                  </el-form-item>
                  <el-form-item label="用户积分">
                    <span class="text-price">{{ props.row.integral_total }}</span>
                  </el-form-item>
                  <el-form-item label="用户余额">
                    <span class="text-price">{{ props.row.balance }}</span>
                  </el-form-item>
                  <el-form-item label="用户等级">
                    <span class="text-price">{{ props.row.member_level.level_name }}</span>
                  </el-form-item>
                  <el-form-item label="分销商状态">
                    <el-tag v-if="props.row.distributors_status == false" type="danger">否</el-tag>
                    <el-tag v-if="props.row.distributors_status == true" type="success">是</el-tag>
                  </el-form-item>
                  <el-form-item label="最后登录">
                    <span>{{ props.row.last_login }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" type="selection" width="50" />
          <el-table-column align="center" label="序号" type="index" width="50" />
          <el-table-column align="center" label="ID" prop="id" width="50" />
          <el-table-column align="center" label="用户名" prop="username" width="80" />
          <el-table-column align="center" label="昵称" prop="nickname" width="80" />
          <el-table-column align="center" label="手机号" prop="phone" width="100" />
          <el-table-column align="center" label="邀请码" prop="mark_id" width="80" />
          <el-table-column align="center" label="上级" prop="mark_id" width="80">
             <template slot-scope="scope">
               <div class="font-s-2">{{ scope.row.leader_nick || scope.row.leader_name }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="身份" prop="identity_name" width="65" />
          <el-table-column align="center" label="操作" width="160">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
              <el-button size="mini" @click="handlePassword(scope.row)">重置密码</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="userTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogEditVisible" width="30%" title="添加/编辑职务">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <div style="width: 50%;">
            <el-input v-model="form.username"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <div style="width: 50%;">
            <el-input v-model="form.nickname"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <div style="width: 50%;">
            <el-input v-model="form.email"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <div style="width: 50%;">
            <el-input v-model="form.phone"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <div style="width: 50%;">
            <el-input v-model="form.age"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="管理员" prop="is_staff">
          <el-switch v-model="form.is_staff"></el-switch>
        </el-form-item>
        <el-form-item label="头像" prop="head_image">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
            :on-success="handleHeadSuccess" :headers="headersobj">
            <img v-if="form.head_image" :src="form.head_image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogPWVisible" width="30%" title="添加/编辑职务">
      <el-form :model="formPassword" ref="form" label-width="80px">
        <el-form-item label="密码" prop="password">
          <div style="width: 50%;">
            <el-input v-model="formPassword.password" placeholder="密码" type="password"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="重复密码" prop="repeatPassword">
          <div style="width: 50%;">
            <el-input v-model="repeatPassword" placeholder="重复密码" type="password"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPWVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFormPW">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>
<script>
  import {
    userListUrl,
    userUrl,
    userDetailUrl,
    userPatchUrl,
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    baseURL
  } from '@/utils/request'
  import util from '@/libs/util'
  export default {
    name: 'userList',
    data() {
      return {
        dialogPWVisible: false,
        dialogEditVisible: false,
        queryInfo: {
          page: 1,
          page_size: 10
        },
        form: {
          username: '',
          nickname:'',
          email: '',
          phone: '',
          is_staff: '',
          sex:'',
          age:'',
          head_image:''
        },
        actionUrl: baseURL + imagesUploadUrl,
        userList: [],
        userTotal: 1,
        takeUserId: '',
        formPassword: {
          password: ''
        },
        repeatPassword: '',
        getUserId: '',
        headersobj:null
      }
    },
    created() {
      this.initData()
    },
    mounted(){
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
      console.log(this.headersobj);
    },
    methods: {
      initData() {
        this.getUserList()
      },
      getUserList() {
        this.$get(userListUrl, this.queryInfo).then(res => {
          this.userList = res.data.data.list
          this.userTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getUserList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getUserList()
      },
      handleEdit(item) {
        this.dialogEditVisible = true
        this.takeUserId = item.id
        this.$get(userDetailUrl + item.id + '/').then(res => {
          this.form = {
            username: res.data.data.username,
            nickname:res.data.data.nickname,
            email: res.data.data.email,
            phone: res.data.data.phone,
            is_staff: res.data.data.is_staff,
            sex:res.data.data.sex,
            age:res.data.data.age,
            head_image:res.data.data.head_image
          }
        })
      },
      handlePassword(item) {
        this.dialogPWVisible = true
        this.getUserId = item.id
      },
      submitForm() {
        this.$patch(userPatchUrl + this.takeUserId + '/', this.form).then(res => {
          this.dialogEditVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getUserList()
        })
      },
      submitFormPW() {
        if (this.formPassword.password !== this.repeatPassword){
          this.$message({
            message: '两次密码不相同',
            type: 'success'
          });
        }else{
          this.$patch(userPatchUrl + this.getUserId + '/', this.formPassword).then(res => {
            this.dialogPWVisible = false
            this.$message({
              message: '重置成功',
              type: 'success'
            });
            this.getUserList()
          })
        }
      },
      handleHeadSuccess(val) {
        this.form.head_image = val.data.url
      },
      handleDelete() {

      }
    }
  }
</script>
